<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>舒适时钟</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    
    <!-- 配置Tailwind自定义颜色 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#3B82F6',
                        secondary: '#10B981',
                        accent: '#F59E0B',
                        neutral: '#6B7280',
                        clockBg: '#F8F9FA',
                        panelBg: '#FFFFFF',
                    },
                }
            }
        }
    </script>
    
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .timer-display {
                text-shadow: 0 2px 4px rgba(0,0,0,0.1);
            }
            .btn-hover {
                @apply transition-all duration-300 hover:shadow-lg transform hover:-translate-y-0.5;
            }
            .panel-shadow {
                box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
            }
        }
    </style>
</head>
<body class="bg-gray-100 min-h-screen p-4 md:p-8">
    <div class="max-w-5xl mx-auto">
        <!-- 标题栏 -->
        <div class="bg-blue-600 text-white p-3 rounded-t-lg flex justify-between items-center">
            <h1 class="text-lg font-medium"><i class="fa fa-clock-o mr-2"></i>舒适时钟</h1>
            <div class="flex gap-2">
                <button class="p-1 hover:bg-blue-700 rounded"><i class="fa fa-window-minimize"></i></button>
                <button class="p-1 hover:bg-blue-700 rounded"><i class="fa fa-window-maximize"></i></button>
                <button class="p-1 hover:bg-blue-700 rounded"><i class="fa fa-times"></i></button>
            </div>
        </div>
        
        <!-- 主内容区 -->
        <div class="bg-white rounded-b-lg p-4 md:p-6">
            <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                <!-- 时钟面板 -->
                <div class="md:col-span-2 bg-clockBg rounded-lg p-6 panel-shadow flex flex-col items-center justify-center">
                    <div id="current-time" class="text-[clamp(2.5rem,8vw,5rem)] font-bold text-gray-800 mb-4">00:00:00</div>
                    <div id="current-date" class="text-gray-600 text-lg mb-2">星期一, 2025年8月25日</div>
                    <div id="current-week" class="text-gray-500">第35周</div>
                </div>
                
                <!-- 倒计时面板 -->
                <div class="bg-clockBg rounded-lg p-6 panel-shadow">
                    <h2 class="text-center text-gray-700 text-xl font-semibold mb-6">倒计时</h2>
                    
                    <!-- 倒计时显示 -->
                    <div class="text-center mb-8">
                        <div id="timer" class="text-[clamp(2rem,6vw,3rem)] font-bold text-primary timer-display">00:00:00</div>
                    </div>
                    
                    <!-- 时间设置 -->
                    <div class="flex justify-center gap-4 mb-8">
                        <div class="text-center">
                            <label for="hours" class="block text-gray-500 text-sm mb-1">小时</label>
                            <input type="number" id="hours" min="0" max="23" value="0" 
                                   class="w-16 h-10 border border-gray-300 rounded-md text-center text-base focus:outline-none focus:ring-2 focus:ring-primary/50">
                        </div>
                        <div class="text-center">
                            <label for="minutes" class="block text-gray-500 text-sm mb-1">分钟</label>
                            <input type="number" id="minutes" min="0" max="59" value="10" 
                                   class="w-16 h-10 border border-gray-300 rounded-md text-center text-base focus:outline-none focus:ring-2 focus:ring-primary/50">
                        </div>
                        <div class="text-center">
                            <label for="seconds" class="block text-gray-500 text-sm mb-1">秒钟</label>
                            <input type="number" id="seconds" min="0" max="59" value="0" 
                                   class="w-16 h-10 border border-gray-300 rounded-md text-center text-base focus:outline-none focus:ring-2 focus:ring-primary/50">
                        </div>
                    </div>
                    
                    <!-- 状态提示 -->
                    <div id="status-indicator" class="text-center text-sm text-gray-500 mb-6">已设置倒计时: 00:10:00</div>
                    
                    <!-- 控制按钮 -->
                    <div class="flex justify-center gap-3">
                        <button id="settingsBtn" class="bg-neutral text-white w-14 h-14 rounded-md flex items-center justify-center text-sm btn-hover">
                            <i class="fa fa-cog mr-1"></i> 设置
                        </button>
                        <button id="startBtn" class="bg-primary text-white w-14 h-14 rounded-md flex items-center justify-center text-sm btn-hover">
                            <i class="fa fa-play mr-1"></i> 开始
                        </button>
                        <button id="pauseBtn" class="bg-accent text-white w-14 h-14 rounded-md flex items-center justify-center text-sm btn-hover" disabled>
                            <i class="fa fa-pause mr-1"></i> 暂停
                        </button>
                    </div>
                </div>
            </div>
            
            <!-- 底部信息 -->
            <div class="mt-6 text-center text-gray-400 text-sm">© 2023 舒适时钟</div>
        </div>
    </div>

    <script>
        // 获取DOM元素
        const timerDisplay = document.getElementById('timer');
        const currentTimeDisplay = document.getElementById('current-time');
        const currentDateDisplay = document.getElementById('current-date');
        const currentWeekDisplay = document.getElementById('current-week');
        const statusIndicator = document.getElementById('status-indicator');
        const hoursInput = document.getElementById('hours');
        const minutesInput = document.getElementById('minutes');
        const secondsInput = document.getElementById('seconds');
        const startBtn = document.getElementById('startBtn');
        const pauseBtn = document.getElementById('pauseBtn');
        const settingsBtn = document.getElementById('settingsBtn');
        
        // 倒计时状态变量
        let totalSeconds = 0;
        let remainingSeconds = 0;
        let countdownInterval = null;
        let isRunning = false;
        
        // 初始化
        function init() {
            // 设置默认倒计时10分钟
            hoursInput.value = 0;
            minutesInput.value = 10;
            secondsInput.value = 0;
            updateFromInputs();
            
            // 更新当前时间
            updateCurrentTime();
            setInterval(updateCurrentTime, 1000);
            
            // 添加事件监听器
            hoursInput.addEventListener('input', updateFromInputs);
            minutesInput.addEventListener('input', updateFromInputs);
            secondsInput.addEventListener('input', updateFromInputs);
            startBtn.addEventListener('click', startCountdown);
            pauseBtn.addEventListener('click', pauseCountdown);
            settingsBtn.addEventListener('click', resetCountdown);
        }
        
        // 更新当前时间和日期
        function updateCurrentTime() {
            const now = new Date();
            
            // 更新时间
            const hours = String(now.getHours()).padStart(2, '0');
            const minutes = String(now.getMinutes()).padStart(2, '0');
            const seconds = String(now.getSeconds()).padStart(2, '0');
            currentTimeDisplay.textContent = `${hours}:${minutes}:${seconds}`;
            
            // 更新日期
            const weekdays = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
            const year = now.getFullYear();
            const month = now.getMonth() + 1;
            const day = now.getDate();
            const weekday = weekdays[now.getDay()];
            currentDateDisplay.textContent = `${weekday}, ${year}年${month}月${day}日`;
            
            // 更新周数
            const weekNumber = getWeekNumber(now);
            currentWeekDisplay.textContent = `第${weekNumber}周`;
        }
        
        // 计算当前是一年中的第几周
        function getWeekNumber(date) {
            const firstDayOfYear = new Date(date.getFullYear(), 0, 1);
            const pastDaysOfYear = (date - firstDayOfYear) / 86400000;
            return Math.ceil((pastDaysOfYear + firstDayOfYear.getDay() + 1) / 7);
        }
        
        // 更新倒计时显示
        function updateTimerDisplay() {
            const hours = Math.floor(remainingSeconds / 3600);
            const minutes = Math.floor((remainingSeconds % 3600) / 60);
            const seconds = remainingSeconds % 60;
            
            // 格式化显示为两位数字
            const formattedHours = String(hours).padStart(2, '0');
            const formattedMinutes = String(minutes).padStart(2, '0');
            const formattedSeconds = String(seconds).padStart(2, '0');
            
            timerDisplay.textContent = `${formattedHours}:${formattedMinutes}:${formattedSeconds}`;
            statusIndicator.textContent = `已设置倒计时: ${formattedHours}:${formattedMinutes}:${formattedSeconds}`;
            
            // 添加数字变化动画
            timerDisplay.classList.add('scale-110');
            setTimeout(() => {
                timerDisplay.classList.remove('scale-110');
            }, 100);
        }
        
        // 从输入框更新倒计时时间
        function updateFromInputs() {
            // 确保输入值有效
            const hours = Math.max(0, Math.min(23, parseInt(hoursInput.value) || 0));
            const minutes = Math.max(0, Math.min(59, parseInt(minutesInput.value) || 0));
            const seconds = Math.max(0, Math.min(59, parseInt(secondsInput.value) || 0));
            
            // 更新输入框显示（防止无效值）
            hoursInput.value = hours;
            minutesInput.value = minutes;
            secondsInput.value = seconds;
            
            // 计算总秒数
            totalSeconds = hours * 3600 + minutes * 60 + seconds;
            remainingSeconds = totalSeconds;
            updateTimerDisplay();
        }
        
        // 开始倒计时
        function startCountdown() {
            if (isRunning || totalSeconds <= 0) return;
            
            isRunning = true;
            startBtn.disabled = true;
            pauseBtn.disabled = false;
            hoursInput.disabled = true;
            minutesInput.disabled = true;
            secondsInput.disabled = true;
            
            // 清除可能存在的定时器
            if (countdownInterval) {
                clearInterval(countdownInterval);
            }
            
            // 设置新的定时器
            countdownInterval = setInterval(() => {
                if (remainingSeconds > 0) {
                    remainingSeconds--;
                    updateTimerDisplay();
                } else {
                    // 倒计时结束
                    clearInterval(countdownInterval);
                    isRunning = false;
                    startBtn.disabled = false;
                    pauseBtn.disabled = true;
                    hoursInput.disabled = false;
                    minutesInput.disabled = false;
                    secondsInput.disabled = false;
                    
                    // 播放提示音
                    playAlarm();
                    
                    // 重置为初始设置的时间
                    remainingSeconds = totalSeconds;
                    updateTimerDisplay();
                }
            }, 1000);
        }
        
        // 暂停倒计时
        function pauseCountdown() {
            if (!isRunning) return;
            
            clearInterval(countdownInterval);
            isRunning = false;
            startBtn.disabled = false;
            pauseBtn.disabled = true;
            hoursInput.disabled = false;
            minutesInput.disabled = false;
            secondsInput.disabled = false;
        }
        
        // 重置倒计时
        function resetCountdown() {
            // 清除定时器
            clearInterval(countdownInterval);
            isRunning = false;
            
            // 重置按钮状态
            startBtn.disabled = false;
            pauseBtn.disabled = true;
            hoursInput.disabled = false;
            minutesInput.disabled = false;
            secondsInput.disabled = false;
            
            // 重新从输入框获取时间
            updateFromInputs();
        }
        
        // 播放提示音
        function playAlarm() {
            try {
                // 创建音频上下文
                const audioContext = new (window.AudioContext || window.webkitAudioContext)();
                const oscillator = audioContext.createOscillator();
                const gainNode = audioContext.createGain();
                
                oscillator.connect(gainNode);
                gainNode.connect(audioContext.destination);
                
                // 设置音频参数
                oscillator.type = 'sine';
                oscillator.frequency.setValueAtTime(1000, audioContext.currentTime); // 频率
                gainNode.gain.setValueAtTime(0.1, audioContext.currentTime); // 音量
                
                // 播放1秒
                oscillator.start();
                oscillator.stop(audioContext.currentTime + 1);
            } catch (e) {
                console.log('播放提示音失败:', e);
                // 降级方案：显示提示
                alert('倒计时结束！');
            }
        }
        
        // 初始化页面
        window.addEventListener('DOMContentLoaded', init);
    </script>
</body>
</html>
